import React from 'react';
import {inject, observer} from 'mobx-react';
import { Route, withRouter, Switch } from 'react-router-dom';
import { Avatar ,Icon, Result , Tools } from 'weaver-mobile';
import { ListPage, RouteLayout  } from 'weaver-mobile-page';
import { toJS } from 'mobx';
import SignData from './signData';
import MeetingQrcode from './meetingQrcode';
import MeetingQrcodeSignSet from './meetingQrcodeSignSet';
import EchartsPie from '../../../public/eCharts_pie';
import MeetingUtil from '../../../util/meetingUtil';
import Signature from './signature';
import SetSignTime from './setSignTime';
import SignMap from './signMap';
const Normal = ListPage.Normal; // Normal 为无路由的普通组件
const getLabel = Tools.getLabel;

@inject('viewMeetingStore')
@withRouter
@observer
class MemberView extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
      };
    }
    
    componentDidMount() {
      this.getSignInitDetail();
    }
    
    componentWillReceiveProps (nextProps) {
      const prePath = this.props.location.pathname;
      const curPath = nextProps.location.pathname;
      if (curPath && curPath !== prePath && curPath === '/calendar/detail/sign') { // 只在 /calendar/detail/sign 请求
        this.getSignInitDetail();
      }
    }

    componentWillUnmount () {
      sessionStorage.removeItem('meetingSignNowTab');
    }

    getSignInitDetail = ()=>{
      const { getSignCount , getLastlySignList } = this.props.viewMeetingStore;
      // getLastlySignList({latelySign:'1'}); // 最新签到不再需要
      getSignCount();
    }

    render() {
      const { signDetailCount , qrCode , lastlySignList , btns} = this.props.viewMeetingStore;
      const signHeight = this.getHeight();
      const mobileshowtemplate = {
        default: [
          {
            key: 'col1',
            style: { flex: 'none' },
            render(a) {
              return <Avatar userId={toJS(a).userId || ''} name={toJS(a).hrmName} url={toJS(a).url} />;
            },
          },
          {
            key: 'col2',
            configs: [
              { key: 'col2-row1', configs: [{ key: 'hrmName' }],style:{color:'#333'} },
              { key: 'col2-row2', configs: [{ key: 'dep' }] },
            ],
          },
          {
            key: 'col3',
            configs: [
              { key: 'col3-row1', configs: [{ key: '' }] },
              { key: 'col3-row2', configs: [{ key: 'signTime' }],style:{float:'right'} },
            ],
          },
        ],
      };
      const renderNoData = (
        <div className={'lastlySignList-nodata'}>
          <Result
            img={<Icon type="no-data" />}
            message={getLabel(83553, '暂无数据')}
          />
        </div>
      );
      return (
        <div className={btns&&btns.length===1&&btns[0]==='doViewLog'?"tabContentHeight2":'tabContentHeight'}>
        <div style={{height:'100%',overflowY:'auto'}} className={'sign-index-contain'}>
          {signDetailCount&&signDetailCount.allMember>0&&
            <div>
              <EchartsPie count={toJS(signDetailCount)} type={'sign'} pieCallBack={this.pieCallBack} qrCode={qrCode}/>
            </div>
          }
          {false&&<div>
            <div className={'lastly-sign-div'}>{getLabel(391081, '最新签到')}</div>
            <div style={{height:signHeight-287-35,overflowY:'auto'}}>
            {toJS(lastlySignList).data.length>0?<Normal
              template={mobileshowtemplate}
              store={lastlySignList}
            />:renderNoData}
            </div>
          </div>}
          
          <Switch>
            <Route
              key="signData"
              path="/calendar/detail/sign/signData"
              render={()=>(
                <RouteLayout>
                <div key="memberDataDiv" className="wm-route-layout wm-demo-route-layout-page">
                  <SignData />
                </div>
                </RouteLayout>
              )}
            />
            <Route
              key="meetingQrcode"
              path="/calendar/detail/sign/meetingQrcode"
              render={()=>(
                <RouteLayout>
                <div key="meetingQrcodeDiv" className="wm-route-layout wm-demo-route-layout-page">
                  <MeetingQrcode />
                </div>
                </RouteLayout>
              )}
            />
            <Route
              key="meetingQrcodeSignSet"
              path="/calendar/detail/sign/meetingQrcodeSignSet"
              render={()=>(
                <RouteLayout>
                <div key="meetingQrcodeDiv" className="wm-route-layout wm-demo-route-layout-page">
                  <MeetingQrcodeSignSet />
                </div>
                </RouteLayout>
              )}
            />
            <Route
              key="signature"
              path="/calendar/detail/sign/signature"
              render={()=>(
                <RouteLayout>
                <div key="signature" className="wm-route-layout wm-demo-route-layout-page">
                  <Signature />
                </div>
                </RouteLayout>
              )}
            />
            <Route
              key="setSignTime"
              path="/calendar/detail/sign/setSignTime"
              render={()=>(
                <RouteLayout>
                <div key="setSignTime" className="wm-route-layout wm-demo-route-layout-page">
                  <SetSignTime />
                </div>
                </RouteLayout>
              )}
            />
            <Route
              key="SignMap"
              path="/calendar/detail/sign/signMap"
              render={()=>(
                <RouteLayout>
                <div key="SignMap" className="wm-route-layout wm-demo-route-layout-page">
                  <SignMap />
                </div>
                </RouteLayout>
              )}
            />

          </Switch>
        </div>
        </div>
      )
    }

    pieCallBack = (key)=>{
      const { history } = this.props;
      const { setState  } = this.props.viewMeetingStore;
      if(key === 0){
        history.push("/calendar/detail/sign/signData/allMember");
        setState({signPage:0});
        sessionStorage.setItem('meetingSignNowTab',0)
      } else if(key === 1){
        history.push("/calendar/detail/sign/signData/sign");
        setState({signPage:1});
        sessionStorage.setItem('meetingSignNowTab',1)
      } else if(key === 3){
        history.push("/calendar/detail/sign/signData/unSign");
        setState({signPage:2});
        sessionStorage.setItem('meetingSignNowTab',2)
      } else if(key === 'qrcode'){
        history.push("/calendar/detail/sign/meetingQrcode");
      } 
    }

    getHeight = () => {
      return document.body.clientHeight - MeetingUtil.getTabHeight();
    }
}

export default MemberView;